<template>
  <div>
    <div class="container">
      <Header />
      <Nav />
      <div class="goods_tilte">
        <div class="goods_left">
          <div class="text_lf">
            <h2>{{ goodsName }}</h2>
          </div>
          <div class="text_lf">
            <a href="">{{ goodsDesc }}</a>
          </div>
          <!-- <span></span>
          <span></span>
          <span></span> -->
        </div>
        <div class="goods_right">
          <div class="text_rg"><a href="">概念页</a></div>
          <div class="text_rg"><a href="">参数页</a></div>
          <div class="text_rg"><a href="">F码通道</a></div>
          <div class="text_rg"><a href="">咨询客服</a></div>
          <div class="text_rg"><a href="">用户评价</a></div>
          <button @click="BuyClick(goodsId)">立即购买</button>
        </div>
      </div>
      <div class="goods_detail">
        <div class="goods_img" v-html="goodsBg"></div>
      </div>
      <Footer />
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";
import Nav from "./Nav.vue";
import Footer from "../components/Footer.vue";
import { getGoods } from "@/assets/js/request.js";
export default {
  data() {
    return {
      detail: [],
      goodsId: "",
      goodsName: "",
      goodsBg: "",
      goodsDesc: "",
    };
  },
  components: {
    Header,
    Nav,
    Footer,
  },
  async created() {
    this.goodsId = this.$route.params.id;
    // console.log(this.$route);
    let goodslist = await getGoods();
    this.detail = goodslist.rows;
    // console.log(this.detail);
    this.detail.forEach((item) => {
      if (this.goodsId == item.id) {
        this.goodsId = item.id;
        this.goodsName = item.name;
        this.goodsBg = item.rich_text;
        this.goodsDesc = item.desc;
      }
    });
  },
  methods: {
    BuyClick(id) {
      this.$router.push(`/buy/${id}`);
    },
  },
};
</script>

<style lang="scss">
// .goods_tilte {
//   border-top: 1px solid #ccc;
//   width: 100%;
//   height: 50px;
//   // background-color: skyblue;
//   position: relative;
//   margin: 0 auto;
//   .goods_left {
//     float: left;
//     height: 50px;
//     position: absolute;
//     left: 15%;
//     .text_lf {
//       margin: 0 auto;
//       display: inline-block;
//       margin: 10px;
//       a {
//         color: black;
//       }
//     }
//   }
//   .goods_right {
//     float: right;
//     height: 50px;
//     position: absolute;
//     right: 15%;
//     .text_rg {
//       margin: 0 auto;
//       display: inline-block;
//       margin: 15px;
//       a {
//         color: black;
//       }
//     }
//     button {
//       display: inline-block;
//       width: 100px;
//       height: 25px;
//       background-color: orangered;
//       border: 1px solid orangered;
//       color: white;
//       font-size: 12px;
//     }
//   }
// }
@import "@/assets/scss/base.scss";
@import "@/assets/scss/reset.scss";
@import "@/assets/scss/Detail.scss";
</style>